import React from 'react'
import './button.css'
import { BrowserRouter as Router, Route, Routes, useNavigate } from 'react-router-dom'
import { Tabbar } from 'react-vant'
import { FriendsO, HomeO, Search, SettingO,ChatO,ManagerO,ShoppingCartO } from '@react-vant/icons'
export default function Butto() {
    const navigate = useNavigate()
    return (
        <div>
            <nav className='but_style'>
                <div className='demo-tabbar'>
                    <Tabbar style={{height:'75px'}}>
                        <Tabbar.Item onClick={()=>{navigate('/')}} icon={<HomeO style={{fontSize:'30px'}}/>}><span style={{fontSize:'20px'}}>首页</span></Tabbar.Item>
                        <Tabbar.Item icon={<Search style={{fontSize:'30px'}}/>}><span style={{fontSize:'20px'}}>社区</span></Tabbar.Item>
                        <Tabbar.Item icon={<ChatO style={{fontSize:'30px'}}/>}><span style={{fontSize:'20px'}}>聊天</span></Tabbar.Item>
                        <Tabbar.Item icon={<ShoppingCartO style={{fontSize:'30px'}}/>}><span style={{fontSize:'20px'}}>商城</span></Tabbar.Item>
                        <Tabbar.Item onClick={()=>{navigate('/mypage')}}icon={<ManagerO  style={{fontSize:'30px'}}/>}><span style={{fontSize:'20px'}}>我的</span></Tabbar.Item>
                    </Tabbar>
                    
                </div>
            </nav>
        </div>
    )
}
